Bootstrap Multiselect

2024-06-22 04:24| 来源: 网络整理| 查看: 265

Multiselect Bootstrap Multiselect - free examples, templates & tutorial

Responsive Multiselect built with Bootstrap 5. Examples of multiselect dropdown with checkbox, listbox, search, buttons, groups, icons, validation, disabled

Unlike a standard Select, multiselect allows the user to select multiple options at once.

Note: To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section

Basic example

Add multiple attribute to the select element to activate multiple mode.

Note: This component requires MDBootstrap Pro package.

Show code Edit in sandbox HTML One Two Three Four Five Six Seven Eight Multiselect with label

It is possible to add select label by creating element with .form-label> and .select-label> classes.

Show code Edit in sandbox HTML One Two Three Four Five Example label Multiselect with placeholder

Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

Show code Edit in sandbox HTML One Two Three Four Five Disabled multiselect

Add disabled attribute to the select element to disable select input.

Show code Edit in sandbox HTML One Two Three Four Five Disabled options

Use disabled attribute on option element to disable specific option.

Show code Edit in sandbox HTML One Two Three Four Five Clear button

Set clearButton option to true to display the button that will allow to clear current selections.

Show code Edit in sandbox HTML One Two Three Four Five Custom content

A custom content container with a class .select-custom-content will be displayed at the end of the select dropdown. In this example we've added a button.

Show code Edit in sandbox HTML One Two Three Four Five Save Visible options

Use visibleOptions option to change the number of options that will be displayed in the select dropdown without scrolling.

Show code Edit in sandbox HTML One Two Three Four Five Secondary text

Add secondary-text data attribute to the specific options to display secondary text.

Show code Edit in sandbox HTML One Two Three Four Five Search

Set filter option to true to enable options filtering.

Show code Edit in sandbox HTML One Two Three Four Five Six Seven Eight Nine Ten Select with search inside a modal

Due to a focus trap in modals, it is not possible to focus the outer elements (like select dropdown). You can use select data-mdb-container option to resolve this problem.

The data-mdb-container accepts selector of the element inside of wich select dropdown will be rendered. In this case, the selector should point to the modal container (the element with class .modal). It is important to use a unique selector to assign select to a specific modal.

Modal title Show code Edit in sandbox HTML Launch demo modal Modal title One Two Three Four Five Six Seven Eight Nine Ten Close Save changes Option groups

It is possible to group options by using optgroup element.

Show code Edit in sandbox HTML One Two Three Four Five Six Multiselect with icons

Add icon data attribute to the specific options to display the option icon.

Show code Edit in sandbox HTML One Two Three Four Five Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.

Show code Edit in sandbox HTML JavaScript One Two Three Four Five Six Seven Eight Submit (() => { 'use strict'; // Fetch all the forms we want to apply custom Bootstrap validation styles to const forms = document.querySelectorAll('.needs-validation'); // Loop over them and prevent submission Array.prototype.slice.call(forms).forEach((form) => { form.addEventListener('submit', (event) => { event.preventDefault(); event.stopPropagation(); form.classList.add('was-validated'); },false); }); })(); Related resources Select Checkbox Radio Select with custom input Login form Address form Registration form Survey form Payment form

If you want to support our friends from TW Elements you can also check out the Tailwind multiselect documentation.

【本文地址】

公司简介

联系我们